
<template>
  <secion>
    <h2>我是栏目管理页面-用于测试文件上传</h2>
    <el-upload
      class="upload"
      accept="image/*"
      drag
      :show-file-list="false"
      :before-upload="handleBeforeUpload"
      :http-request="handleHttpRequest"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖拽文件或 <em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">请上传小于500kb的图片</div>
        <el-progress :percentage="progressNum" />
      </template>
    </el-upload>
    <img
      class="resource-img"
      :src="formData.file_path"
      v-if="formData.file_path"
    />
  </secion>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules, UploadRawFile } from "element-plus";
import setupUpload from "@/util/upload";
import { reactive } from "vue";

const formData = reactive<any>({});

let {handleHttpRequest,progressNum} = setupUpload(formData);


/**
 * 上传预校验，如果返回false，那么阻止文件上传
 * @param rawFile 
 */
function handleBeforeUpload(rawFile: UploadRawFile) {
  // 只能小于2mb的文件
  if (rawFile.size > 2 * 1024 * 1024) {
    alert({ type: "error", message: "请上传小于500kb的文件" });
    return false;
  }
  // 只能上传图片：
  if (!rawFile.type.startsWith("image/")) {
    alert({ type: "error", message: "请上传图片" });
    return false;
  }
}
</script>

<style>
</style>